<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <script>


            var arr=new Array();
            arr[0]=[new Option("---方向---",-1)];
            arr[1]=[new Option("图形计算",1),new Option("软件开发",2),new Option("数据库管理",3)];
            arr[2]=[new Option("商务英语",1),new Option("专业英语",2)];


            function change(index){

                var s2=document.getElementById("s2");


                s2.options.length=0;

                for(var i=0;i<arr[index].length;i++){
                    s2.options[i]=arr[index][i];
                }



            }
            
            
            function loadData() {

                var y=document.getElementById("y");
                var m=document.getElementById("m");


                for(i=1;i<=12;i++){
                    var monthOption=new Option(i+"月",i);
                    m.options[m.length]=monthOption;
                }

                var currYear=new Date().getFullYear();

                for(var i=currYear-5;i<=currYear+5;i++){
                    var yearOption=new Option(i+"年",i);
                    y.options[y.length]=yearOption;
                }
            }
            
            
            function loadDay() {
                var y=document.getElementById("y");
                var m=document.getElementById("m");
                var d=document.getElementById("d");

                var year=y.options[y.selectedIndex].value;
                var month=m.options[m.selectedIndex].value;



                if(year==-1||month==-1){
                    d.options.length=1;
                    return;
                }

                var day=getDay(year,month);



                if(d.length==1){
                    for(var i=1;i<=28;i++){
                        var dayOption=new Option(i+"日",i);
                        d.options[d.length]=dayOption;
                    }
                }


                d.options.length=29;

                for(var i=29;i<=day;i++){
                    var dayOption=new Option(i+"日",i);
                    d.options[d.length]=dayOption;
                }

            }

            function getDay(year,month){
                // if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
                //     return 31;
                // }else if(month==2){
                //     if(year%400==0||(year%4==0&&year%100!=0)){
                //         return 29;
                //     }else{
                //         return 28;
                //     }
                // }else{
                //     return 30;
                // }
                var date=new Date(year,month,1-1);
                return date.getDate();
            }

        </script>
    </head>
    <body onload="loadData();">
        <select id="s1" onchange="change(this.selectedIndex);">
            <option value="-1">---专业---</option>
            <option value="1">计算机</option>
            <option value="2">英语</option>
        </select>

        <select id="s2">
            <option value="-1">---方向---</option>
        </select>

        <hr/>

        <!--
            当前页面打开时年和月存在
            月1-12
            年当前日期的前后5年
            日根据选择的年和月通过js生成
        -->
        <select id="y" onchange="loadDay();">
            <option value="-1">---年---</option>
        </select>
        <select id="m" onchange="loadDay();">
            <option value="-1">---月---</option>
        </select>
        <select id="d">
            <option value="-1">---日---</option>
        </select>
    </body>
</html>